<template>
    <div>

        <el-form :model="model" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
            <el-row>
                <el-col :span="8">
                    <el-form-item label="物料编码" prop="ItemCode">
                        <el-input v-model="model.ItemCode" placeholder="物料编码" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料名称" prop="ItemName">
                        <el-input v-model="model.ItemName" placeholder="物料名称" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="是否启用" prop="EnableFlag">
                        <el-radio-group v-model="model.EnableFlag" :readonly="true">
                            <el-radio label="Y">是</el-radio>
                            <el-radio label="N">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="线别名称" prop="LineType">
                        <el-input v-model="model.LineType" placeholder="线别" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="型号名称" prop="Model">
                        <el-input v-model="model.Model" placeholder="型号" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">

                    <el-form-item label="规格名称" prop="Spec">
                        <el-input v-model="model.Spec" placeholder="规格名称" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="供应商" prop="Vendor">
                        <el-input v-model="model.VendorName" placeholder="供应商" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="有效日期" prop="EffectiveDate">
                        <el-input v-model="model.EffectiveDate" placeholder="有效日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="品类名称" prop="Kind">
                        <el-input v-model="model.Kind" placeholder="品类名称" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-divider></el-divider>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="产品物料标识" prop="ItemOrProduct">
                        <el-input type="textarea" v-model="model.ItemOrProduct" placeholder="请输入产品物料标识" autosize
                            :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品单位" prop="UnitOfMeasure">
                        <el-input v-model="model.UnitOfMeasure" placeholder="产品单位" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品分类" prop="ItemTypeName">
                        <el-input v-model="model.ItemTypeName" placeholder="产品分类" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="备注" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="采购价" prop="PurchasePrice">
                        <el-input v-model="model.PurchasePrice" placeholder="采购价" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="销售价" prop="SalePrice">
                        <el-input v-model="model.SalePrice" placeholder="销售价" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="启用安全库存" prop="SafeStockFlag" label-width="120px">
                        <el-radio-group v-model="model.SafeStockFlag">
                            <el-radio label="Y" >是</el-radio>
                            <el-radio label="N" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="model.SafeStockFlag == 'Y'">
                    <el-form-item label="最低库存" prop="MinStock" :readonly="true">
                        <el-input v-model="model.MinStock" placeholder="请输入最低库存量"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="model.SafeStockFlag == 'Y'">
                    <el-form-item label="最大库存" prop="MaxStock" :readonly="true">
                        <el-input v-model="model.MaxStock" placeholder="请输入最大库存量"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>


        </el-form>
        <div style="border: 1px solid #dcdfe6; padding: 10px;">
            <h1 style="margin: 10px;">BOM组成</h1>
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="BomItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="BomItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="BomItemSpec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Quantity" label="使用比例" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
        </div>
    </div>
</template>



<script>

export default {
    props: {
        model: {
            require: true,
            type: Object,

        }
    },
    data() {
        return {
            tableData: [],
            isLoading: false,
        }
    },
    created() {
        this.GetProductBombyId(this.model.Id);
    },
    methods: {

        GetProductBombyId(Id) {
            this.isLoading = true;
            this.$http.get('/api/Item/GetProductBombyId', {
                params: {
                    ItemId: Id
                }
            })
                .then(res => {
                    this.tableData = res.Data;
                    this.isLoading = false;
                })
        },

    }
}
</script>